﻿@{
    ViewBag.Title = "";
    var id = Model != null ? Model.ID : 0;
}
@using ZBJF.Warranty.WebProvider
<style type="text/css">
    button {
        width: 95px;
    }

        .btnContainer button :hover {
           border-color:aqua;
        }

    .fl {
        float: left;
    }

    .fr {
        float: right;
    }

    .mulSelectContainer {
        width: 300px;
    }

    .mulSelectTitle {
        border: 1px solid #ccc;
        border-bottom: none;
        background-color: #eee;
        border-radius: 4px 4px 0 0;
        padding: 3px 4px;
    }

    .mulSelect {
        width: 100%;
        min-height: 180px;
        border-radius: 0 0 4px 4px;
    }

    .selectAll {
        cursor: pointer;
    }

        .selectAll:hover {
            color: #0026cc;
        }

    .btnContainer {
        margin: 26px auto;
        padding-top: 20px;
        line-height: 35px;
    }
</style>
<ul class="nav nav-tabs">
    <li>
        <a href="/InsuranceWarrantyRecord/QuotationIndex">
            配件价格列表
        </a>
    </li>
    <li class="active"><a href="/InsuranceWarrantyRecord/ExportQuotationList">创建自定义报价清单</a></li>
</ul>
<div class="form-horizontal">
    <div class="control-group">
        <label class="control-label">服务商：</label>
        <div class="controls">
            @Html.DropDownList("serviceProvider", ConvertToSelector.Instance.ServiceProviderConvertToSelectList())
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">设备类型：</label>
        <div class="controls">
            <select id="productType" style="min-width:120px;"></select>
        </div>
    </div>
    <!--配件类型和等级-->
    <div class="control-group">
        <label class="control-label">配件类型：</label>
        <div class="controls" style="width:700px;">

            <div class="mulSelectContainer fl" style="width:160px;">
                <div class="mulSelectTitle">
                    <span>可选配件</span>
                </div>
                <select multiple="multiple" id="accessoriesType" class="mulSelect"></select>
            </div>
            <div class="mulSelectContainer fl" style="width:160px; margin-left:10px;">
                <div class="mulSelectTitle">
                    <span>可选配件等级</span>
                </div>
                <select multiple="multiple" id="accessoriesLevel" class="mulSelect"></select>
            </div>
            <div style="width:98px;float:left; text-align:center;">
                <div class="btnContainer">
                    <div>
                        <button class="" id="selectAccessoriesAll">全部选择 >></button>
                    </div>
                    <div>
                        <button id="selectAccessories">选择 ></button>
                    </div>
                    <div>
                        <button id="cancelAccessories">< 取消</button>
                    </div>
                    <div>
                        <button id="cancelAccessoriesAll"><< 全部取消</button>
                    </div>
                </div>
            </div>
            <div class="mulSelectContainer fr" style="width:271px;">
                <div class="mulSelectTitle">
                    <span>已选配件等级</span>
                </div>
                <select multiple="multiple" id="accessoriesLevelSelected" class="mulSelect"></select>
            </div>

        </div>
    </div>
    <!--品牌-->
    <div class="control-group">
        <label class="control-label">品牌名称：</label>
        <div class="controls">
            <select id="productBrands" style="min-width:120px;">
                <option value="0">请选择</option>
            </select>
        </div>
    </div>
    <!--型号-->
    <div class="control-group">
        <label class="control-label">型号：</label>
        <div class="controls" style="width:700px;">

            <div class="mulSelectContainer fl">
                <div class="mulSelectTitle">
                    <span>可选型号</span>
                </div>
                <select multiple="multiple" id="productModels" class="mulSelect"></select>
            </div>
            <div style="width:98px;float:left; text-align:center;">
                <div class="btnContainer">
                    <div>
                        <button id="selectModelAll">全部选择 >></button>
                    </div>
                    <div>
                        <button id="selectModel">选择 ></button>
                    </div>
                    <div>
                        <button id="cancelModel">< 取消</button>
                    </div>
                    <div>
                        <button id="cancelModelAll"><< 全部取消</button>
                    </div>
                </div>
            </div>
            <div class="mulSelectContainer fr">
                <div class="mulSelectTitle">
                    <span>已选型号</span>
                </div>
                <select multiple="multiple" id="productModelsSelected" class="mulSelect"></select>
            </div>

        </div>
    </div>


    <div class="control-group">
        <label class="control-label">维修方式：</label>
        <div class="controls">
            @foreach (var item in ConvertToSelector.Instance.EnumTypeConvertToSelectList(typeof(ZBJF.Warranty.Common.Enums.InsuranceWarranty.InsuranceWarrantyMaintenanceType), 0,false))
            {
                <input class="repairType" type="checkbox" value="@item.Value" >@item.Text
            }
        </div>
    </div>
    <div class="form-actions" style="padding-left:320px;">
        <form action="/InsuranceWarrantyRecord/ExportQuotation" id="inputForm" method="post">
            <input type="hidden" name="accessoriesLevelParams" id="accessoriesLevelParams" value="" />
            <input type="hidden" name="repairType" id="repairType" value="" />
            <input type="hidden" name="modelParams" id="modelParams" value="" />
            <input type="hidden" name="serviceProviderId" id="serviceProviderId" value="" />
            <input id="btnSubmit" class="btn btn-primary Edit-R" type="button" value="导出报价清单" onclick="exportQuotation(this)">
            <input class="btn" type="button" value="重置" onclick="refresh()">
        </form>
    </div>
</div>
@section scripts{
    <script>
        $(function () {
            //获取设备类型
            setSelectData("/ProductType/GetAllProductType", "GET", "productType", {}, "ID", "ProductName", true);
            //选择设备类型事件
            $("#productType").on("change", function () {
                var _productTypeId = $(this).val();
                if (!_productTypeId)
                    return;

                //获取已选配件的ID
                var _options = $("#accessoriesTypeSelected option[productTypeId='" + _productTypeId + "']");
                var ids = "";
                for (var i = 0, j = _options.length; i < j; i++) {
                    var item = $(_options[i]);
                    if (i == 0) {
                        ids += item.val();
                    } else {
                        ids += "," + item.val();
                    }
                }

                //设置配件类型
                setSelectData("/AccessoriesType/GetAccessoriesType", "GET", "accessoriesType", { ProductTypeId: _productTypeId, Ids: ids }, "ID", "AccessoriesName", false);
                //设置品牌名称
                setSelectData("/ProductBrands/GetProductBrands", "GET", "productBrands", { ProductTypeId: _productTypeId }, "ID", "BrandName", true);

                $("#productModels").html("");
                $("#accessoriesLevel").html("");
            })
            //选择品牌事件
            $("#productBrands").on("change", function () {
                var _productBrandsId = $(this).val();
                if (!_productBrandsId)
                    return;

                //获取已选型号的ID
                var _options = $("#productModelsSelected option[productBrandsId='" + _productBrandsId + "']");
                var ids = "";
                for (var i = 0, j = _options.length; i < j; i++) {
                    var item = $(_options[i]);
                    if (i == 0) {
                        ids += item.val();
                    } else {
                        ids += "," + item.val();
                    }
                }
                //设置型号
                setSelectData("/ProductModels/GetProductModels", "POST", "productModels", { ProductBrandsId: _productBrandsId, Ids: ids }, "ID", "ModelName", false);
            })

            //-------------------------------------配件等级START--------------------------------
            //选择配件等级
            $("#selectAccessories").on("click", function () {
                var selectedOption = $("#accessoriesLevel option:selected");
                if (!selectedOption || selectedOption.length < 1) {
                    layer.alert("请至少选择一项");
                    return;
                }
                for (var i = 0, j = selectedOption.length; i < j; i++) {
                    var item = $(selectedOption[i]);
                    //item.removeAttr("selected");
                    item.html(item.attr("AccessoriesLevelFullName"));
                }
                $("#accessoriesLevelSelected").append(selectedOption);
            })
            //全部选择配件等级
            $("#selectAccessoriesAll").on("click", function () {
                var selectedOption = $("#accessoriesLevel option");
                if (!selectedOption || selectedOption.length < 1) {
                    layer.alert("请至少选择一项");
                    return;
                }
                for (var i = 0, j = selectedOption.length; i < j; i++) {
                    var item = $(selectedOption[i]);
                    //item.removeAttr("selected");
                    item.html(item.attr("AccessoriesLevelFullName"));
                }
                $("#accessoriesLevelSelected").append(selectedOption);
            })
            //取消配件等级
            $("#cancelAccessories").on("click", function () {
                var selectedOption = $("#accessoriesLevelSelected option:selected");
                if (!selectedOption || selectedOption.length < 1) {
                    layer.alert("请至少选择一项");
                    return;
                }
                var _accessoriesTypeId = $("#accessoriesType option:selected");
                for (var i = 0, j = selectedOption.length; i < j; i++) {
                    var item = $(selectedOption[i]);
                    item.html(item.attr("AccessoriesLevelName"));
                    var accessoriesTypeId = item.attr("AccessoriesTypeId");
                    if (_accessoriesTypeId.length < 1) {
                        item.remove();
                        continue;
                    }
                    let tag = false;
                    for (let m = 0, n = _accessoriesTypeId.length; m < n; m++) {
                        if (accessoriesTypeId == $(_accessoriesTypeId[m]).val()) {
                            tag = true;
                            break;
                        }
                    }
                    if (tag) {
                        $("#accessoriesLevel").append(item);
                    } else {
                        item.remove();
                    }
                }
            })
            //全部取消配件等级
            $("#cancelAccessoriesAll").on("click", function () {
                var selectedOption = $("#accessoriesLevelSelected option");
                if (!selectedOption || selectedOption.length < 1) {
                    layer.alert("请至少选择一项");
                    return;
                }
                var _accessoriesTypeId = $("#accessoriesType option:selected");
                for (var i = 0, j = selectedOption.length; i < j; i++) {
                    var item = $(selectedOption[i]);
                    item.html(item.attr("AccessoriesLevelName"));
                    var accessoriesTypeId = item.attr("AccessoriesTypeId");
                    if (_accessoriesTypeId.length < 1) {
                        item.remove();
                        continue;
                    }
                    let tag = false;
                    for (let m = 0, n = _accessoriesTypeId.length; m < n; m++) {
                        if (accessoriesTypeId == $(_accessoriesTypeId[m]).val()) {
                            tag = true;
                            break;
                        }
                    }
                    if (tag) {
                        $("#accessoriesLevel").append(item);
                    } else {
                        item.remove();
                    }
                }
            })

            //配件类型点击事件
            $("#accessoriesType").on("click", function () {
                SetAccessoriesLevel();
            })
            //-------------------------------------配件类型END----------------------------------

            //-------------------------------------型号START--------------------------------
            //选择型号
            $("#selectModel").on("click", function () {
                var selectedOption = $("#productModels option:selected");
                if (!selectedOption || selectedOption.length < 1) {
                    layer.alert("请至少选择一项");
                    return;
                }
                var _productTypeName = $("#productBrands option:selected").html() + "_";
                var _productTypeId = $("#productBrands option:selected").val();
                for (var i = 0, j = selectedOption.length; i < j; i++) {
                    var item = $(selectedOption[i]);
                    item.attr("productBrandsId", _productTypeId);
                    item.attr("productModelsName", item.html());
                    //item.removeAttr("selected");
                    item.html(_productTypeName + item.html());
                }
                $("#productModelsSelected").append(selectedOption);
            })
            //全选型号
            $("#selectModelAll").on("click", function () {
                var selectedOption = $("#productModels option");
                if (!selectedOption || selectedOption.length < 1) {
                    layer.alert("请至少选择一项");
                    return;
                }
                var _productBrandsName = $("#productBrands option:selected").html() + "_";
                var _productBrandsId = $("#productBrands option:selected").val();
                for (var i = 0, j = selectedOption.length; i < j; i++) {
                    var item = $(selectedOption[i]);
                    item.attr("productBrandsId", _productBrandsId);
                    item.attr("productModelsName", item.html());
                    item.attr("selected", "selected");
                    item.html(_productBrandsName + item.html());
                }
                $("#productModelsSelected").append(selectedOption);
            })
            //取消型号
            $("#cancelModel").on("click", function () {
                var selectedOption = $("#productModelsSelected option:selected");
                if (!selectedOption || selectedOption.length < 1) {
                    layer.alert("请至少选择一项");
                    return;
                }
                var _productBrandsId = $("#productBrands option:selected").val();
                for (var i = 0, j = selectedOption.length; i < j; i++) {
                    var item = $(selectedOption[i]);
                    //item.removeAttr("selected");
                    item.html(item.attr("productModelsName"));

                    var id = item.attr("productBrandsId");
                    if (id == _productBrandsId) {
                        $("#productModels").append(item);
                    } else {
                        item.remove();
                    }
                }
            })
            //全部取消型号
            $("#cancelModelAll").on("click", function () {
                var selectedOption = $("#productModelsSelected option");
                if (!selectedOption || selectedOption.length < 1) {
                    layer.alert("请至少选择一项");
                    return;
                }
                var _productBrandsId = $("#productBrands option:selected").val();
                for (var i = 0, j = selectedOption.length; i < j; i++) {
                    var item = $(selectedOption[i]);
                    item.attr("selected", "selected");
                    item.html(item.attr("productModelsName"));
                    var id = item.attr("productBrandsId");
                    if (id == _productBrandsId) {
                        $("#productModels").append(item);
                    } else {
                        item.remove();
                    }
                }
            })
            //-------------------------------------型号END----------------------------------

        })

        //获取设备类型; 数据后台地址 | 请求方式（post/get） | select标签的ID | 请求参数 | Value对应的字段名称 | Text对应的字段名称 | 是否有默认选项 true/false
        function setSelectData(url, postType, selectId, params, valueName, textName, hasDefault) {
            //加载所有的带接入列表
            $.ajax({
                type: postType,
                url: url,
                dataType: "json",
                data: params,
                success: function (data) {
                    if (!data.Result) {
                        alert("初始化数据失败");
                        return;
                    }
                    var _data = data.Data;
                    var _html = "";
                    if (_data && _data.length > 0) {
                        if (hasDefault == true) {
                            _html += "<option value='0'>请选择</option>";
                        }
                        _data.forEach(function (item) {
                            _html += "<option value='" + item[valueName] + "'>" + item[textName] + "</option>";
                        })
                    }
                    $("#" + selectId).html(_html);
                }
            });
        }

        function exportQuotation(_this) {
            _this.disabled = 'disabled';
            var _params = {};
            //获取已选配件的ID
            _params.AccessoriesLevelParams = getSelectedIds("#accessoriesLevelSelected option");
            _params.ModelParams = getSelectedIds("#productModelsSelected option");
            _params.ServiceProviderId = $("#serviceProvider").val();
            if (!_params.ServiceProviderId) {
                layer.alert("请选择服务商");
                _this.disabled = '';
                return;
            }
            if (!_params.AccessoriesLevelParams) {
                layer.alert("请选择配件等级");
                _this.disabled = '';
                return;
            }
            if (!_params.ModelParams) {
                layer.alert("请选择设备型号");
                _this.disabled = '';
                return;
            }

            var _options = $(".repairType:checked");
            var repairType = "";
            for (let i = 0, j = _options.length; i < j; i++) {
                let item = $(_options[i]);
                if (i == 0) {
                    repairType += item.val();
                } else {
                    repairType += "," + item.val();
                }
            }
            if (!repairType) {
                layer.alert("请选择维修方式");
                _this.disabled = '';
                return;
            }

            $("#repairType").val(repairType);
            $("#accessoriesLevelParams").val(_params.AccessoriesLevelParams);
            $("#modelParams").val(_params.ModelParams);
            $("#serviceProviderId").val(_params.ServiceProviderId);
            document.getElementById("inputForm").submit();

            _this.disabled = '';
        }

        function getSelectedIds(options) {
            var _options = $(options);
            var ids = "";
            for (var i = 0, j = _options.length; i < j; i++) {
                var item = $(_options[i]);
                if (i == 0) {
                    ids += item.val();
                } else {
                    ids += "," + item.val();
                }
            }
            //var ids = [];
            //for (var i = 0, j = _options.length; i < j; i++) {
            //    var item = $(_options[i]);
            //    ids.push(item.val());
            //}
            return ids;
        }
        function refresh() {
            window.location.href = window.location.href;
        }


        //获取配件等级列表
        function SetAccessoriesLevel() {
            //获取已选配件的ID
            var _options = $("#accessoriesType option:selected");
            var _accessoriesTypeIds = "";
            for (let i = 0, j = _options.length; i < j; i++) {
                let item = $(_options[i]);
                if (i == 0) {
                    _accessoriesTypeIds += item.val();
                } else {
                    _accessoriesTypeIds += "," + item.val();
                }
            }
            //获取已选配件等级的ID
            var _optionLevels = $("#accessoriesLevelSelected option");
            var _accessoriesLevelIds = "";
            for (let i = 0, j = _optionLevels.length; i < j; i++) {
                let item = $(_optionLevels[i]);
                if (i == 0) {
                    _accessoriesLevelIds += item.val();
                } else {
                    _accessoriesLevelIds += "," + item.val();
                }
            }
            //加载所有的带接入列表
            $.ajax({
                type: "GET",
                url: "/AccessoriesLevel/GetAccessoriesLevel",
                dataType: "json",
                data: { AccessoriesTypeIds: _accessoriesTypeIds, Ids: _accessoriesLevelIds },
                success: function (data) {
                    if (!data.Result) {
                        alert("初始化数据失败");
                        return;
                    }
                    var _data = data.Data;
                    var _html = "";
                    if (_data && _data.length > 0) {
                        _data.forEach(function (item) {
                            _html += "<option value='" + item["ID"] + "' AccessoriesLevelName='" + item["AccessoriesLevelName"] + "' AccessoriesTypeId='" + item["AccessoriesTypeId"] + "' AccessoriesLevelFullName='" + item["ProductName"] + "_" + item["AccessoriesName"] + "_" + item["AccessoriesLevelName"] + "' >" + item["AccessoriesLevelName"] + "</option>";
                        })
                    }
                    $("#accessoriesLevel").html(_html);
                }
            });
        }
    </script>
}